<!--房源房间编辑-->
<template>
	<a-modal v-bind="options" class="house-room-edit-dialog">
		<template #title>编辑房间 - {{ house.houseFullAddress }}</template>
		<a-form ref="form" :model="house" :rules="roomRules(house)" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="6">
					<a-form-item label="房间号" name="roomName">
						<a-input v-model:value="house.roomName" allow-clear :maxlength="10" placeholder="请输入房间号" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item :label="'房型' + (props?.talentedHouseStatus || 0)" name="roomTypeId">
						<a-select
							v-model:value="house.roomTypeId"
							v-bind="roomTypeOptions"
							:disabled="[2, 3].includes(props?.talentedHouseStatus || 0)">
							<template #option="item">
								{{ item.name }}
								<a @click.stop="onClickToEditRoomType(item)" style="float: right">
									<edit-outlined />
								</a>
							</template>
							<template #dropdownRender="{menuNode}">
								<component :is="menuNode" />
								<a-divider style="margin: 4px 0" />
								<a-button type="link" size="small" @click="onClickToEditRoomType()">添加房型</a-button>
							</template>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="house.houseBizMode == 1 ? 4 : 6">
					<a-form-item label="出租价（元）" name="actualPrice">
						<a-input-number
							v-model:value="house.actualPrice"
							:precision="2"
							:min="0"
							@change="house.basePrice = house.actualPrice"
							placeholder="请输入" />
					</a-form-item>
				</a-col>
				<a-col :span="house.houseBizMode == 1 ? 4 : 6">
					<a-form-item label="底价（元）" name="basePrice">
						<a-input-number
							v-model:value="house.basePrice"
							:precision="2"
							:min="0"
							:max="house.actualPrice"
							placeholder="请输入" />
					</a-form-item>
				</a-col>
				<a-col v-if="house.houseBizMode == 1" :span="4">
					<a-form-item label="收房价（元）" name="costPrice">
						<a-input-number v-model:value="house.costPrice" :precision="2" :min="0" :max="999999999.99" placeholder="请输入" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="面积" name="houseArea">
						<a-input-number v-model:value="house.houseArea" :precision="2" :min="0" placeholder="请输入" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="朝向" name="orientation">
						<a-select
							v-model:value="house.orientation"
							:options="orientationList"
							allow-clear
							show-search
							placeholder="请选择朝向" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="可住人数" name="userlimit">
						<a-input-number v-model:value="house.userlimit" :min="0" :precision="0" placeholder="请输入" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="可租日期" name="avaliableDate">
						<a-date-picker v-model:value="house.avaliableDate" :value-format="DATE_FORMAT.DATE" placeholder="请选择" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
	<room-type-edit-dialog v-model:visible="visibles.roomTypeEdit" :value="roomType" @close="getRoomTypes" />
</template>

<script lang="ts" setup>
	import {reactive, ref, toRef, watchEffect} from 'vue'
	import {FormInstance, message} from 'ant-design-vue'
	import {EditOutlined} from '@ant-design/icons-vue'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'
	import houseApi from '@/api/house-api'
	import {DEFAULT_FIELD_NAME} from 'yuxin-base/src/constant'
	import {RoomType} from '@/interface/community'
	import {roomRules} from '@/rules/community'
	import {HouseBase, orientationList,HouseDetail} from '@/interface/house'
	import RoomTypeEditDialog from '@/components/house/edit/centralized/room-type-edit-dialog.vue'
	import {useStore} from '@/store/index'
	const hasPermissions = useStore().hasPermissions
	const props = defineProps<{
		visible: boolean
		value: HouseBase
		detail: HouseDetail
		talentedHouseStatus?: number
	}>()

	const form = ref<FormInstance>()
	// 房源信息
	const house = ref<HouseBase>({})

	const visibles = reactive({
		roomTypeEdit: false
	})

	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		width: 800,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		visible: toRef(props, 'visible'),
		onOk() {
			form.value?.validate().then(() => {
				options.confirmLoading = true
				houseApi
					.updateRoomBaseInfo(house.value)
					.then(() => {
						options.onCancel()
						message.success('更新成功')
					})
					.finally(() => (options.confirmLoading = false))
			})
		},
		onCancel() {
			form.value?.resetFields()
			emits('update:visible', false)
			setTimeout(() => emits('close'), 300)
		}
	})

	const roomType = ref<RoomType>({})
	const roomTypeOptions = reactive({
		options: [],
		showSearch: true,
		optionFilterProp: 'name',
		placeholder: '请选择房型',
		fieldNames: DEFAULT_FIELD_NAME,
		onSelect(value: string, option: RoomType) {
			house.value.houseArea = option.area
			house.value.basePrice = option.basePrice
			house.value.costPrice = option?.costPrice || null
			house.value.actualPrice = option.rentalPrice
			house.value.orientation = option.orientation
			house.value.avaliableDate = option.avaliableDate
			house.value.userlimit = option.userLimit
		}
	})
	// 房型列表
	const getRoomTypes = () => {
		houseApi.getRoomTypeList(props.value.communityId as string).then(({data}) => (roomTypeOptions.options = data))
	}
	watchEffect(() => {
		if (props.visible) {
			getRoomTypes()
			house.value = {...props.value}
		}
	})

	const onClickToEditRoomType = (item = {communityId: house.value.communityId}) => {
		roomType.value = item
		visibles.roomTypeEdit = true
	}
</script>

<style lang="less">
	.house-room-edit-dialog {
		.ant-modal-body {
			overflow: auto;
			max-height: 600px;
		}
	}
</style>
